<template>
  <div>
    <h3>购物车清单</h3>
    <!-- 操作面板 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column width="200">
        <!-- type="selection" -->
        <template slot-scope="scope">
          <input type="checkbox" v-model="scope.row.checked" />
        </template>
      </el-table-column>
      <el-table-column label="商品" show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.logo" />
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="200">
        <template slot-scope="scope">
          <div class="flex-box">
            <button class="btn-w-20" @click="reduce(scope.row)">-</button>
            <input type="text" class="input-w-30" v-model="scope.row.count" />
            <button class="btn-w-20" @click="add(scope.row)">+</button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价（元）" width="200">
        <template slot-scope="scope">
          <span class="tred">{{ scope.row.price | suffix }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金额（元）" width="200">
        <template slot-scope="scope">
          <span class="tred">{{
            (scope.row.price * scope.row.count) | suffix
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <el-button type="primary" @click="del">删除</el-button>
      </el-table-column>
    </el-table>
    <ul>
      <li>
        <input type="checkbox" v-model="allChecked" style="margin-left:20px;" />
        全选
        <button @click="removeSelect" style="margin-left:10px;">
          删除所选商品
        </button>
        <button @click="fan" style="margin-left:10px;">
          反选
        </button>
      </li>
      <li>
        <span class="tred">{{ state.count }}</span>
        件商品总计（不含运费）
        <span class="tred">
          {{ state.totalPrice | suffix }}
        </span>
        <button>去结算</button>
      </li>
    </ul>
  </div>
</template>

<script>
const ajaxData = [
  {
    id: 1,
    name: "女鞋",
    price: 300,
    logo: require("@/assets/12-2/1.webp"),
    count: 2,
  },
  {
    id: 2,
    name: "厨具",
    price: 2000,
    logo: require("@/assets/12-2/2.webp"),
    count: 1,
  },
  {
    id: 3,
    name: "口红",
    price: 120,
    logo: require("@/assets/12-2/3.webp"),
    count: 3,
  },
];
export default {
  //过滤器
  filters: {
    suffix(value) {
      let price = Number(value);
      return `￥ ${value.toFixed(2)}`;
    },
  },
  computed: {
    //是一个全选
    allChecked: {
      get() {
        const checkeds = this.tableData.filter((item) => item.checked);
        return checkeds.length === this.tableData.length;
      },
      set(state) {
        this.tableData = this.tableData.map((item) => {
          item.checked = state;
          return item;
        });
      },
    },
    //是一个全选，选中条数，总计价格
    state() {
      // 监听tableData数据
      const checkeds = this.tableData.filter((item) => item.checked);
      const checked = checkeds.length === this.tableData.length;
      const totalPrice = checkeds.reduce((a, b) => {
        return a + b.price * b.count;
      }, 0);
      return { count: checkeds.length, checked, totalPrice };
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    window.fetch("/").then(() => {
      //得到了接口数据，对数据进行一个处理
      //给数据每一条加一个checked属性
      this.tableData = ajaxData.map((item) => {
        item.checked = false;
        return item;
      });
    });
  },
  methods: {
    fan() {
      this.tableData = this.tableData.map((item) => {
        item.checked = !item.checked;
        return item;
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除被选中的数据
    removeSelect() {
      this.tableData = this.tableData.filter((item) => {
        if (!item.checked) {
          return item;
        }
      });
    },
    //删除物品
    del(index) {
      this.tableData.splice(index, 1);
      console.log(this.tableData);
    },
    //减少购买
    reduce(data) {
      //如果值为0，checked值为false
      //如果为0，就不能再减了
      if (data.count > 0) {
        data.count--;
      }
      if (data.count === 0) {
        data.checked = false;
      }
    },
    //增加购买
    add(data) {
      //增加的量不能超过库存数
      if (data.count === 5) {
        this.$message({
          message: "已超过限制数量",
          type: "error",
        });
      } else {
        data.count++;
      }
    },
  },
};
</script>

<style>
div {
  text-align: center;
}
ul {
  height: 58px;
  line-height: 58px;
  padding: 0;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}
li {
  list-style: none;
}
.flex-box {
  display: flex;
  justify-content: center;
}
.space-between {
  justify-content: space-between;
}
.btn-w-20 {
  width: 20px;
}
.tred {
  color: #ff0000;
}
img {
  width: 100px;
}
.input-w-30 {
  width: 30px;
  text-align: center;
}
.pand {
  text-align: center;
}
</style>
